<template>
      <div>
        <!-- 第一列栅格布局 -->
        <el-row>
          <el-col :span="12">
            <ul>
              <li>
                <img src="https://www.baidu.com/img/flexible/logo/pc/result.png"/>
                9527客户群
              </li>
              <li>
                群公告：
              </li>
              <li>
                群标签：
                <span>客户群</span>
              </li>
              <li>
                <el-button size="small" icon="el-icon-plus" @click="">新建按钮</el-button>
              </li>
            </ul>
            <el-row>
              <el-col :span="5">
                <div class="four"><div>3</div>群人数</div>
              </el-col>
              <el-col :span="5">
                <div class="four"><div>1</div>群内客户数</div>
              </el-col>
              <el-col :span="5">
                <div class="four"><div>3</div>今日入群</div>
              </el-col>
              <el-col :span="5">
                <div class="four"><div>0</div>今日退群</div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <div class="detailDate">
              <el-calendar v-model="value">
              </el-calendar>
            </div>
          </el-col>
        </el-row>
        <!-- 第二列布局 -->
        <el-row>
          <el-col :span="24">
            <div class="title">群人员趋势分析</div>
            <div class="block">
              <el-date-picker
                v-model="timeValue"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
            <div ref="chart" style="height: 400px"></div>
            <el-button size="mini" type="primary" @click="back()">返回</el-button>
          </el-col>
        </el-row>
      </div>
</template>

<script>
export default {
  name: "EventDetail",
  props: {
    rowId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      value: new Date(),
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      timeValue: ''
    }
  },

  mounted() {
    this.gerEchartData()
  },
  methods: {
    back() {
      this.$emit("currentHandler","list")
    },
    gerEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function() {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed',()=>{
        window.removeEventListener("resize", function() {
          myChart.resize();
        });
      })
    }
  }
}
</script>

<style scoped>
.el-calendar {
  width: 60%;
}
ul li {list-style: none; margin: 10px 0 10px 0;}
ul li span{background: rgb(197,227,255); color: #3a8ee6; padding: 2px;}
img {width: 100px; height: 100px;  margin-right: 30px;}
.four {border: 1px solid #ccc; border-radius: 3px; color: #aaa; text-align: center; padding: 20px 0; margin: 0 10px;}
.four div {color: #3a8ee6;}
.title {font-size: 23px; margin-bottom: 20px;}
</style>
<style>
.detailDate .el-calendar-table .el-calendar-day {
  height: 40px
}
</style>
